<template>
  <page-header-wrapper>
    <page-tab-list v-if="showActions">
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商家">
                <a-input allow-clear placeholder="请输入商家名称" v-model="queryParam.store_name" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="仓库选择">
                <div class="flex">
                  <a-select
                    placeholder="请选择"
                    v-model="queryParam.front_agent_admin_id"
                    allowClear
                    :filter-option="filterOption"
                    show-search
                    @change="handleSearch"
                  >
                    <a-select-option v-for="item of list" :value="item.id" :key="item.id"
                      >{{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-button type="primary" @click="search">查询</a-button>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <!-- 代理 -->
    <listModule
      ref="listModule"
      :showAction="showActions"
      :showActions="showActions"
      :params="queryParam"
      @handle="handle"
    ></listModule>
    <formModule
      ref="formModule"
      :params="{
        type: 1,
        status: 1,
      }"
      @callback="search"
    ></formModule>
  </page-header-wrapper>
</template>

<script>
import { list } from '@/api/warehouse.js'

import listModule from './components/bindDepotListShop'
import formModule from './components/addBindDepotShop'
import storage from 'store'

export default {
  components: {
    listModule,
    formModule,
  },

  data() {
    return {
      queryParam: {
        store_name: '',
        front_agent_admin_id: '',
      },

      list: [],
      showActions: true,
    }
  },

  computed: {
    userInfo() {
      return this.$store.state.user
    },
  },

  async created() {
    if (this.$route.query.id) {
      this.queryParam.front_agent_admin_id = this.$route.query.id
    }

    if (this.userInfo.info.type === 'front_agent') {
      this.showActions = false
    }

    this.search()
    let res = await list({
      pageSize: 10000,
      pageNo: 1,
    })
    if (res.code == 0) {
      this.list = res.data.list || []
    }
  },

  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    handleSearch(value) {
      if (!value) return
      let [item] = this.list.filter((d, index) => {
        return d.id == value
      })
      this.queryParam.front_agent_admin_id = item.id
    },

    search() {
      this.$nextTick(() => {
        this.$refs.listModule.tablePageChange(1)
      })
    },

    handle(type, item) {
      switch (type) {
        case 'add':
          this.openEditPop()
          break

        case 'edit':
          this.openEditPop({
            front_agent_admin_id: item.front_agent ? String(item.front_agent.id) : '',
            store_id: String(item.id),
            type: 1,
          })
          break
      }
    },

    openEditPop(params) {
      this.$refs.formModule.open(params)
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}

.flex {
  .inp {
    margin-right: 16px;
  }
}
</style>
